<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="12">
              <a-form-item label="时间">
                <a-range-picker
                  format="YYYY-MM-DD"
                  :placeholder="['开始时间', '结束时间']"
                  @change="onRangeChange"
                />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="设备编号">
                <a-input v-model="queryParam.equipmentNo" placeholder=""/>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-button type="primary" @click="search()">查询</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <div class="table-operator">
        <!-- <div class="total">
          <div class="total-box">
            <div class="total-first">总发电量</div>
            <div class="total-two">12345</div>
          </div>
          <div class="total-box">
            <div class="total-first">总减排</div>
            <div class="total-two">23546</div>
          </div>
        </div> -->
        <div class="echart" id="mychart" :style="myChartStyle"></div>
      </div>

      <step-by-step-modal ref="modal" @ok="handleOk"/>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import moment from 'moment'
import { STable, Ellipsis } from '@/components'
import { getDataStat } from '@/api/device'
import * as echarts from 'echarts'

import StepByStepModal from './modules/StepByStepModal'
import CreateForm from './modules/CreateForm'
import { ref } from 'vue';
const value1 = ref();

export default {
  name: 'TableList',
  components: {
    STable,
    Ellipsis,
    CreateForm,
    StepByStepModal
  },
  data () {
    return {
      // 柱状图
      xData: [], // 横坐标
      chargingCapacity:[],
      co2:[],
      nox:[],
      so2:[],
      tonerDust:[],
      myChartStyle: { float: 'left', width: '100%', height: '400px' },
      // 查询参数
      queryParam: {
        beginDateTime :'2023-01-01',
        endDateTime :'2023-12-01',
        equipmentNo:''
      },
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        const requestParameters = Object.assign({}, parameter, this.queryParam)
        console.log('loadData request parameters:', requestParameters)
        return getDeviceList(requestParameters)
          .then(res => {
            return res.result
          })
      },
      selectedRowKeys: [],
      selectedRows: []
    }
  },
  filters: {
  },
  created() {
    this.getDataStat()
  },
  mounted () {
    this.initEcharts()
  },
  computed: {
    rowSelection () {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: this.onSelectChange
      }
    }
  },
  methods: {
    search(){
      this.getDataStat()
    },
    onRangeChange(e){
      var beginDateTime =moment(e[0]).format('yyyy-MM-DD')
      var endDateTime =moment(e[1]).format('yyyy-MM-DD')
      this.queryParam.beginDateTime=beginDateTime
      this.queryParam.endDateTime=endDateTime
    },
    getDataStat(){
      getDataStat(this.queryParam).then(res=>{
        res.data.forEach(element => {
          this.xData.push(element.month)
          this.chargingCapacity.push(element.chargingCapacity)
          this.nox.push(element.nox)
          this.so2.push(element.so2)
          this.tonerDust.push(element.tonerDust)
        });
        this.initEcharts()
      })
    },
    initEcharts () {
      // 多列柱状图
      const mulColumnZZTData = {
        xAxis: {
          data: this.xData
        },
        // 图例
        legend: {
          data: ['发电量(度)', '减少二氧化碳排放(千克)','减少氮氧化物排放(千克)','减少二氧化硫排放(千克)','减少碳粉尘排放(千克)'],
          top: '0%'
        },
        yAxis: {},
        series: [
          {
            type: 'bar', // 形状为柱状图
            data: this.chargingCapacity,
            name: '发电量(度)', // legend属性
            label: {
              // 柱状图上方文本标签，默认展示数值信息
              show: true,
              position: 'top'
            }
          },
          {
            type: 'bar', // 形状为柱状图
            data: this.co2,
            name: '减少二氧化碳排放(千克)', // legend属性
            label: {
              // 柱状图上方文本标签，默认展示数值信息
              show: true,
              position: 'top'
            }
          },
          {
            type: 'bar', // 形状为柱状图
            data: this.nox,
            name: '减少氮氧化物排放(千克)', // legend属性
            label: {
              // 柱状图上方文本标签，默认展示数值信息
              show: true,
              position: 'top'
            }
          },
          {
            type: 'bar', // 形状为柱状图
            data: this.so2,
            name: '减少二氧化硫排放(千克)', // legend属性
            label: {
              // 柱状图上方文本标签，默认展示数值信息
              show: true,
              position: 'top'
            }
          },
          {
            type: 'bar', // 形状为柱状图
            data: this.tonerDust,
            name: '减少碳粉尘排放(千克)', // legend属性
            label: {
              // 柱状图上方文本标签，默认展示数值信息
              show: true,
              position: 'top'
            }
          }
        ]
      }
      const myChart = echarts.init(document.getElementById('mychart'))
      myChart.setOption(mulColumnZZTData)
      // 随着屏幕大小调节图表
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    },
    handleAdd () {
      this.mdl = null
      this.visible = true
    },
    handleEdit (record) {
      this.visible = true
      this.mdl = { ...record }
    },
    handleOk () {
      const form = this.$refs.createModal.form
      this.confirmLoading = true
      form.validateFields((errors, values) => {
        if (!errors) {
          console.log('values', values)
          if (values.id > 0) {
            // 修改 e.g.
            new Promise((resolve, reject) => {
              setTimeout(() => {
                resolve()
              }, 1000)
            }).then(res => {
              this.visible = false
              this.confirmLoading = false
              // 重置表单数据
              form.resetFields()
              // 刷新表格
              this.$refs.table.refresh()

              this.$message.info('修改成功')
            })
          } else {
            // 新增
            new Promise((resolve, reject) => {
              setTimeout(() => {
                resolve()
              }, 1000)
            }).then(res => {
              this.visible = false
              this.confirmLoading = false
              // 重置表单数据
              form.resetFields()
              // 刷新表格
              this.$refs.table.refresh()

              this.$message.info('新增成功')
            })
          }
        } else {
          this.confirmLoading = false
        }
      })
    },
    handleCancel () {
      this.visible = false

      const form = this.$refs.createModal.form
      form.resetFields() // 清理表单数据（可不做）
    },
    handleSub (record) {
      if (record.status !== 0) {
        this.$message.info(`${record.no} 订阅成功`)
      } else {
        this.$message.error(`${record.no} 订阅失败，规则已关闭`)
      }
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    toggleAdvanced () {
      this.advanced = !this.advanced
    },
    resetSearchForm () {
      this.queryParam = {
        date: moment(new Date())
      }
    }
  }
}
</script>
<style lang="less" scoped>
.total{
  display: flex;
  width: 100%;
  justify-content: center;
  .total-box{
    width: 200px;
    height: 100px;
    border:1px solid #FFCC00;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
    .total-first{
      margin-bottom: 10px;
    }
    .total-two{

    }
  }
}
</style>
